<template>
    <div id="TryManage">
         <table class="table">
            <tbody>
                <tr >
                    <td>  
                        <el-input placeholder="姓名" v-model="searchData.sname" prefix-icon="el-icon-search"
                        @focus="clearAnotherInput('sname')" clearable
                        >
                        </el-input>
                    </td>
                    <td>
                         <el-input  placeholder="联系电话"   v-model="searchData.mobile"     prefix-icon="el-icon-search" @focus="clearAnotherInput('mobile')" clearable>
                        </el-input>
                    </td>
                    <td>
                         <el-date-picker
                            v-model="searchData.arriveTime"
                            type="date"
                            placeholder="上门时间"
                            
                            value-format="yyyy-MM-dd"
                            suffix-icon="el-icon-date"
                            @focus="clearAnotherInput('arriveTime')"
                            >
                        </el-date-picker>
                    </td>
                    <td>
                         <el-input placeholder="咨询师" v-model="searchData.advisor"  @focus="clearAnotherInput('advisor')"   prefix-icon="el-icon-search" clearable
>
                        </el-input>
                    </td>
                     <td>
                        <el-select v-model="searchData.status" placeholder="状态" @click.native="loadStatus">
                            <el-option v-for="item in social_status "
                            :key="item.kvalue"
                            :label="item.kvalue"
                            :value="item.kkey"
                            suffix-icon="el-icon-search"

                            ></el-option>
                        </el-select>
                    </td>
                    <td>
                        <el-button type="primary" @click="search(searchData,baseURL)"  prefix-icon="el-icon-date">查询</el-button>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table  table-bordered">
            <tbody>
                <tr class="tableHeader">
                    <td>姓名</td>
                    <td>联系电话</td>
                    <td>上门时间</td>
                    <td>咨询师</td>
                    <td>状态</td>
                    <td>试学</td>
                    <td>报名</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,key) in dataSource" :key="key" class="tableRow">
                    <td>{{item.sname}}</td>
                    <td>{{item.mobile}}</td>
                    <td>{{item.arriveTime}}</td>
                    <td>{{item.advisor}}</td>
                    <td>{{item.status|showStatus}}</td>
                    <td>{{item.isTry?"是":"否"}}</td>
                    <td>{{item.isPay?"是":"否"}}</td>
                    <td>
                        <el-button
                        size="mini"
                        @click="follow(key, item)"  type="danger" plain>
                        跟踪</el-button>
                    </td>
                </tr>
            </tbody>
        </table>
         <el-pagination
            background
            layout="prev, pager, next"
            :total="totalRecord"
            @current-change="currentChange">
        </el-pagination>
    </div>
</template>
<script>
export default {
    data(){
        return {
            searchByTry: false,
            totalPage: 5,
            totalRecord: 1,
            baseURL: window.baseURL+"/backstage/tryLearn/findByPage?token="+this.$token+"&",
            arriveTime:'',
            social_status: [],
            searchData: { //搜索数据
                sname: '',
                mobile: '',
                arriveTime: '',
                advisor: '',
                status: '',
            },
            dataSource: [
                {
                    sname: '',
                    mobile: '',
                    arriveTime: '',
                    advisor: '',
                    status: '',
                    isTry: 1,
                    isPay: 1,
                }
            ]
        }
    },
    methods: {
          loadData(pageNo){
            var socialURL = window.baseURL+"/backstage/social/findTryByPage?token="+this.$token+"&pageSize=10&pageNum="+pageNo+"&signal=2";
            this.$http.get(socialURL)
            .then((response)=>{
                this.dataSource = response.data.data.list.results;
                this.tempDataSource = this.dataSource;
                this.totalPage = response.data.data.list.totalPage;
                this.totalRecord = response.data.data.list.totalRecord;
            })
            .catch((error)=>{
            })
        },
        follow(index,visitor){
            localStorage.setItem("currentVisitor",JSON.stringify(visitor));
            this.$router.push({name:'TotryFllowVisitor',params:{currentVisitor: visitor}})
        },
         currentChange(value){
            this.loadData(value);
        },
    },
    filters: {
        showStatus(value){
            var status = ["2天之内关单","1周内关单","长期跟单","无效量"]
            return status[value-1];
        }
    },
    created(){
        this.loadData(1);
    }
}
</script>
<style lang="scss" scoped>
    #TryManage{
        width: 100%;
        height: 100%;
        padding: 50px;
        position: absolute;   
    }
</style>

